<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简用户管理系统</title>
<style>
  body { font-family: sans-serif; margin: 0; background: #f7f7f7; }
  .container { max-width: 900px; margin: 0 auto; padding: 10px; }
  header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
  table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
  th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
  th { background: #fafafa; }
  .btn { padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; }
  .btn-primary { background: #2563eb; color: #fff; }
  .btn-danger { background: #dc2626; color: #fff; }
  .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; }
  .modal.show { display: flex; }
  .modal-content { background: #fff; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; }
  .form-group { margin-bottom: 15px; }
  label { display: block; margin-bottom: 5px; }
  input, select { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; }
  .actions { display: flex; gap: 8px; }
  .search-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
  .search-bar input { flex: 1; }
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>用户管理</h1>
    <button id="addUserBtn" class="btn btn-primary">添加用户</button>
  </header>

  <div class="search-bar">
    <input id="searchInput" placeholder="搜索用户名或邮箱">
    <button id="refreshBtn" class="btn">刷新</button>
  </div>

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>角色</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="userTable"></tbody>
  </table>
</div>

<!-- 添加/编辑用户 -->
<div id="userModal" class="modal">
  <div class="modal-content">
    <h2 id="modalTitle">添加用户</h2>
    <form id="userForm">
      <input type="hidden" id="userId">
      <div class="form-group">
        <label>用户名</label>
        <input id="username" required>
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input id="email" type="email" required>
      </div>
      <div class="form-group">
        <label>角色</label>
        <select id="role">
          <option value="admin">管理员</option>
          <option value="editor">编辑</option>
          <option value="viewer">查看者</option>
        </select>
      </div>
      <div class="form-group">
        <label>状态</label>
        <select id="status">
          <option value="active">活跃</option>
          <option value="inactive">未活跃</option>
        </select>
      </div>
      <div class="actions">
        <button type="button" id="closeModal" class="btn">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
  </div>
</div>

<!-- 删除确认 -->
<div id="deleteModal" class="modal">
  <div class="modal-content">
    <h3>确认删除？</h3>
    <p>删除后无法恢复。</p>
    <input type="hidden" id="deleteId">
    <div class="actions">
      <button id="cancelDelete" class="btn">取消</button>
      <button id="confirmDelete" class="btn btn-danger">删除</button>
    </div>
  </div>
</div>

<script>
let users = [
  { id: 1, username: 'zhangsan', email: 'zhangsan@example.com', role: 'admin', status: 'active' },
  { id: 2, username: 'lisi', email: 'lisi@example.com', role: 'editor', status: 'inactive' }
];

const userTable = document.getElementById('userTable');
const userModal = document.getElementById('userModal');
const deleteModal = document.getElementById('deleteModal');
const userForm = document.getElementById('userForm');
const userId = document.getElementById('userId');
const username = document.getElementById('username');
const email = document.getElementById('email');
const role = document.getElementById('role');
const status = document.getElementById('status');
const modalTitle = document.getElementById('modalTitle');
const searchInput = document.getElementById('searchInput');

function renderUsers(list = users) {
  userTable.innerHTML = list.map(u => `
    <tr>
      <td>${u.id}</td>
      <td>${u.username}</td>
      <td>${u.email}</td>
      <td>${u.role}</td>
      <td>${u.status}</td>
      <td class="actions">
        <button class="btn" onclick="editUser(${u.id})">编辑</button>
        <button class="btn btn-danger" onclick="deleteUser(${u.id})">删除</button>
      </td>
    </tr>
  `).join('');
}

function openModal(isEdit = false, id = null) {
  userForm.reset();
  userId.value = '';
  if (isEdit) {
    const u = users.find(x => x.id === id);
    userId.value = u.id;
    username.value = u.username;
    email.value = u.email;
    role.value = u.role;
    status.value = u.status;
    modalTitle.textContent = '编辑用户';
  } else {
    modalTitle.textContent = '添加用户';
  }
  userModal.classList.add('show');
}

function editUser(id) {
  openModal(true, id);
}

function deleteUser(id) {
  document.getElementById('deleteId').value = id;
  deleteModal.classList.add('show');
}

document.getElementById('addUserBtn').onclick = () => openModal();
document.getElementById('closeModal').onclick = () => userModal.classList.remove('show');
document.getElementById('cancelDelete').onclick = () => deleteModal.classList.remove('show');

userForm.onsubmit = (e) => {
  e.preventDefault();
  const data = { username: username.value, email: email.value, role: role.value, status: status.value };
  if (userId.value) {
    const idx = users.findIndex(x => x.id == userId.value);
    users[idx] = { ...users[idx], ...data };
  } else {
    const newId = Math.max(...users.map(u => u.id), 0) + 1;
    users.push({ id: newId, ...data });
  }
  renderUsers();
  userModal.classList.remove('show');
};

document.getElementById('confirmDelete').onclick = () => {
  const id = Number(document.getElementById('deleteId').value);
  users = users.filter(u => u.id !== id);
  renderUsers();
  deleteModal.classList.remove('show');
};

document.getElementById('refreshBtn').onclick = () => {
  searchInput.value = '';
  renderUsers();
};

searchInput.oninput = () => {
  const q = searchInput.value.toLowerCase();
  const res = users.filter(u => 
    u.username.toLowerCase().includes(q) || 
    u.email.toLowerCase().includes(q)
  );
  renderUsers(res);
};

renderUsers();
</script>
</body>
</html>